<template>
  <el-dialog title="公众号用户标签管理" :close-on-click-modal="false" :visible.sync="dialogVisible">
    <div v-loading="submitting" class="panel  flex flex-wrap">
      <el-tag v-for="tag in wxUserTags" :key="tag.id" closable :disable-transitions="false" @click="editTag(tag.id,tag.name)" @close="deleteTag(tag.id)">
        {{ tag.id }} {{ tag.name }}
      </el-tag>
      <el-input v-if="inputVisible" ref="saveTagInput" v-model="inputValue" class="input-new-tag" placeholder="回车确认" size="small" @keyup.enter.native="addTag" />
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible=false">关闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { mapState } from 'vuex'
import { addFansTag, deleteFansTag, getFansTags, updateFansTag } from '../api/wx_fans_tag'
export default {
  name: 'WxUserTagsManager',
  props: {
    visible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      inputVisible: false,
      inputValue: '',
      submitting: false
    }
  },
  mounted() {
    this.FansTags()
  },
  methods: {
    // 获取标签
    FansTags() {
      getFansTags().then(({ data }) => {
        this.wxUserTags = data
        this.$forceUpdate()
      })
    },
    show() {
      this.dialogVisible = true
    },
    deleteTag(tagid) {
      if (this.submitting) {
        return
      }
      this.$confirm(`确定删除标签?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitting = true
        deleteFansTag({
          tagId: tagid
        }).then(({ data }) => {
          this.FansTags()
          this.$emit('change')
          this.submitting = false
        })
      })
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    addTag() {
      const newTagName = this.inputValue
      this.saveTag(newTagName)
      this.inputVisible = false
      this.inputValue = ''
    },
    editTag(tagid, orignName = '') {
      this.$prompt('请输入新标签名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: orignName,
        inputPattern: /^.{1,30}$/,
        inputErrorMessage: '名称1-30字符'
      }).then(({ value }) => {
        console.log(value)
        this.editFansTag(value, tagid)
      })
    },
    editFansTag(name, tagid) {
      if (this.submitting) {
        return
      }
      this.submitting = true
      updateFansTag({
        tagId: tagid,
        title: name
      }).then(({ data }) => {
        this.FansTags()
        this.$emit('change')
        this.submitting = false
        this.$message.success('修改成功')
      })
    },
    saveTag(name, tagid) {
      if (this.submitting) {
        return
      }
      this.submitting = true
      addFansTag({
        title: name
      }).then(({ data }) => {
        this.FansTags()
        this.$emit('change')
        this.submitting = false
        this.$message.success('添加成功')
      })
    }
  }
}
</script>
<style scoped>
.panel {
    flex: 1;
}
.el-tag,.button-new-tag {
    margin: 5px;
}
.input-new-tag {
    width: inherit;
}
</style>
